<template>
	<view class="">
		<u-popup :z-index="zIndex" ref="uPopup1" @close="close" @open="open" :mask-close-able="maskClose"
		v-model="popShows" 
		mode="center" 
		:negative-top="negativeTop"
		:border-radius="bordRadio" 
		:width="width" :closeable="closeable">
			<view class="parkPlatChenk_pop">
				<view class="pop_header flex_hcneter">
					<u-image
					width="44rpx"
					height="44rpx" 
					:src="imgPath.mine_tcyk"></u-image>
					<view class="pop_title">{{title}}</view>
				</view>
				<parkPlatkeyWords
				v-if="chePlateFlag"
				ref="cardRef" 
				id="cardRef"
				@transfer="bindtransfer" 
				:carnums="carnum"
				onlyInput ></parkPlatkeyWords>
				<view v-if="phoneFlag">
					<view class="flex_hcneter pop_item">
						<view class="wordBreak">手机号：</view>
						<input class="input flex_flex" 
						disabled
						:value="form.phoneNumber" 
						@focus="foncusInput"
						@input="phoneInput" type="Number" placeholder="请输入手机号" />
					</view>
					<view class="flex_hcneter pop_item">
						<view class="wordBreak">验证码：</view>
						<view class="flex_hcneter input flex_flex">
							<input class=" flex_flex" 
							@focus="foncusInput"
							type="Number" @input="codeInput" :value="form.code" placeholder="请输入验证码" />
							<view class="yanzeng" @click="getCode">{{tips}}</view>
							
						</view>
					</view>
				</view>
				
				<view class="pop_footer">
					<view class="pop_bt flex_zhcenter" @click="confim">{{popbtConfim}}</view>
				</view>
			</view>
		</u-popup>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import parkPlatkeyWords from '@/components/parkPlatkeyWord/index.vue';
	import { VerifyLicePlate,_ref, } from '@/utils/str.js';
	import  { imgPath } from '@/static/imgPath.js'
	export default {
	  name: "index",
	  components: {
	    parkPlatkeyWords
	  },
		props: {
			zIndex: {//权重
					type: [Number],
					default:()=>{
							return 997
					}
			},
			title: {//标题
					type: [String],
					default:()=>{
						return '车牌查询'
					}
			},
			chePlateFlag: {//是否填写车牌号
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			phoneFlag: {//是否需要手机号验证
				type: [Boolean],
				default:()=>{
					return true
				}
			},
			maskClose: {//点击遮罩是否关闭
				type: [Boolean],
				default:()=>{
					return true
				}
			},
			negativeTop: {//中部弹出时，以避免可能弹出的键盘重合，往上偏移的值，单位任意，数值则默认为rpx单位
				type: [Number,String],
				default:()=>{
					return 0
				}
			},
			btModel: {//按钮模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			contModel: {//内容模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			popbtConfim: {//确定按钮
				type: [String],
				default:()=>{
					return '确认'
				}
			},
			popsmTitle: {//小标题
				type: [String],
				default:()=>{
					return ''
				}
			},
			popTitle: {//弹窗标题
				type: [String],
				default:()=>{
					return '温馨提示'
				}
			},
			popShow: {//弹窗显示隐藏
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			bordRadio: {//圆角
				type: [Number,String],
				default:()=>{
					return 22
				}
			},
			width: {//宽度
				type: [Number,String],
				default:()=>{
					return '600rpx'
				}
			},
			closeable: {//是否显示关闭按钮
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			getCodeModel: {//获取验证码模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
		},
	  data() {
	    return {
				imgPath,//图片地址
				carnum: '',//车牌
				form:{},//提交的表达那数据
				tips: '获取验证码',//验证吗显示文字
				seconds: 60,//验证码倒计时
				popShows:false,
	    };
	  },
		watch:{
			popShow(val){
				this.popShows = val
			}
		},
	  mounted() {
			this.carnum = this.$configApi.CARD_NO_FIRST_WORD 
	    this.popShows = this.popShow
	  },
	  methods: {
			phoneInput(e){//手机号输入
				this.form.phoneNumber = e.detail.value
			},
			//验证吗输入
			codeInput(e){
				this.form.code = e.detail.value
			},
			bindtransfer(e){//手机验证赋值
				this.carnum=e.value
			},
			codeChange(text) {//验证吗文字显示
				this.tips = text;
			},
			//设置车牌号
			setCarNum(e){
				this.carnum = e
			},
			async getCode() {//获取验证码
				if(!this.$u.test.mobile(this.form.phoneNumber)) {
					return this.$refs.uToast.show({
							title: '请输入正确手机号~',
							type: 'warning',
						})
				}
				if(this.chePlateFlag && !VerifyLicePlate(this.carnum)) {
					return this.$refs.uToast.show({
							title: '请输入正确车牌号~',
							type: 'warning',
						})
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let res = ''
					if(this.getCodeModel == 2) {
						res = await this.$u.api.getSmsCodeForCarPayment({
							phoneNo:this.form.phoneNumber,
							plateNo:this.carnum
						})
					}else{
						res = await this.$u.api.verifySmsPlateNoCode({
							phoneNo:this.form.phoneNumber,
							plateNo:this.carnum
						})
					}
					
					uni.hideLoading();
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					if(!res) return
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
				} else {//倒计时结束后再发送
				}
			},
			foncusInput(){//输入框聚焦
				this.$nextTick(()=>{
					if(this.$refs.cardRef) this.$refs.cardRef.hide()
				})
				
			},
			open(){
				
				if(this.chePlateFlag) {
					this.$nextTick(()=>{
						this.$refs.cardRef = _ref(this.$refs, 'cardRef')
						this.$refs.cardRef.show()
						this.$refs.cardRef.clearData()
						this.carnum = this.$configApi.CARD_NO_FIRST_WORD 
					})
				}
				
				let form = {...this.form}
				form.phoneNumber = uni.getStorageSync('userInfo').phone
				this.form = {...form}
				this.form.code = ''
				this.popShows = this.popShow
			},//打开弹窗
			close(){//关闭弹窗
				this.popShows = false
				this.$emit('close')
			},
			confim(){//弹窗确认
				if(!this.$u.test.mobile(this.form.phoneNumber) && this.phoneFlag) {
					return this.$refs.uToast.show({
							title: '请输入正确手机号~',
							type: 'warning',
						})
				}
				if(this.chePlateFlag && !VerifyLicePlate(this.carnum)) {
					return this.$refs.uToast.show({
							title: '请输入正确车牌号~',
							type: 'warning',
						})
				}
				if(!this.form.code && this.phoneFlag) {
					return this.$refs.uToast.show({
							title: '请输入验证码~',
							type: 'warning',
						})
				}
				// this.popShows = false
				this.$emit('confim',{
					plateNumber:this.carnum,
					smsCode:this.form.code,
					phonenum:this.form.phoneNumber,
				})
			}
	  }
	};
</script>

<style lang="less" scoped>
	.parkPlatChenk_pop{
		padding: 0 20rpx;font-size: 28rpx;
		.pop_header{
			height: 112rpx;border-bottom: 2rpx solid #EEEEEE;
		}
		.pop_title{color: #333333;margin-left: 20rpx;}
		.pop_item{
			color: #666666;margin-bottom: 40rpx;
			.input{height: 80rpx;border-bottom: 2rpx solid #EEEEEE;}
			.yanzeng{
				margin-left: 20rpx;background-color: #2770FE;color: #fff;
				padding: 8rpx 12rpx;border-radius: 8rpx;font-size: 28rpx;
			}
		}
		.pop_bt{
			height: 88rpx;border-radius: 12rpx;background: linear-gradient(to right, #00C6FF,#0072FF);
			color: #fff;font-size: 28rpx;
		}
		.pop_footer{padding-bottom: 40rpx;}
	}
</style>